<template>
  <q-btn-group rounded class="full-width">
    <q-btn v-if="type.toLowerCase().includes('big')"
           @click="changeValue('minus', bigStep)" icon="mdi-chevron-double-left" style="width: 36px;"/>
    <q-btn v-if="type.toLowerCase().includes('small')"
           @click="changeValue('minus', smallStep)" icon="mdi-chevron-left" style="width: 36px;"/>
    <q-btn :label="label ? label : modelValue" style="width: 100%;"/>
    <q-btn v-if="type.toLowerCase().includes('small')"
           @click="changeValue('plus', smallStep)" icon="mdi-chevron-right" style="width: 36px;"/>
    <q-btn v-if="type.toLowerCase().includes('big')"
           @click="changeValue('plus', bigStep)" icon="mdi-chevron-double-right" style="width: 36px;"/>
  </q-btn-group>
</template>

<script>
  export default {
    name: "ButtonNumber",
    props: {
      value: {
        type: Number
      },
      label: {
        type: String
      },
      minValue: {
        type: Number,
        default: 0.0
      },
      maxValue: {
        type: Number,
        default: 10.0
      },
      smallStep: {
        type: Number,
        default: 0.1
      },
      bigStep: {
        type: Number,
        default: 1.0
      },
      cycle: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'smallBig'
      }
    },
    data: function () {
      return {
        modelValue: 0.0
      }
    },
    watch: {
      value() {
        this.modelValue = this.value
      },
      modelValue() {
        this.onValueChanged()
      }
    },
    methods: {
      changeValue(action, value) {
        if(action.toLowerCase() === 'plus') {
          this.modelValue += value
          if(this.modelValue > this.maxValue) this.modelValue = this.cycle ? this.minValue : this.maxValue
        } else if(action.toLowerCase() === 'minus') {
          this.modelValue -= value
          if(this.modelValue < this.minValue) this.modelValue = this.cycle ? this.maxValue : this.minValue
        }
      },
      onValueChanged() {
        this.$emit('change', this.modelValue)
      }
    },
    mounted () {
      this.modelValue = this.value
    }
  }
</script>

<style scoped>
</style>
